<template>
    <div class='content'>
        <e-heading grade='1'>{{$route.query.orgname}}授权功能</e-heading>
        <!--根据groupType菜单分组 10：赛事权限 11：培训权限 12：票务权限 13：赞助权限 20：订单管理 30：服务管理 40：支付管理 50：系统管理-->
        <el-row class="org_servelist" v-if="listShow[10]">
          <el-col :span="4" class="org_sername">赛事业务</el-col>
          <el-col :span="20" class="org_serlcont">
            <el-row>
                <el-col :span="6" class="org_serlist" v-for='item in list' :key="item.id" v-if="item.groupType === 10">
                  <router-link :to="item.serviceUrl">
                    <p @click="handleChangeRoute($event,item.serviceName)">
                    <e-img-match v-bind:src='item.iconUrl' width='90' height='90'/>
                    <p>{{item.serviceName}}</p>
                    </p>
                  </router-link>
                </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!--根据groupType菜单分组 10：赛事权限 11：培训权限 12：票务权限 13：赞助权限 20：订单管理 30：服务管理 40：支付管理 50：系统管理-->
        <el-row class="org_servelist" v-if="listShow[11]">
          <el-col :span="4" class="org_sername">培训业务</el-col>
          <el-col :span="20" class="org_serlcont">
            <el-row>
                <el-col :span="6" class="org_serlist" v-for='item in list' :key="item.id" v-if="item.groupType === 11">
                  <router-link :to="item.serviceUrl">
                    <p @click="handleChangeRoute($event,item.serviceName)">
                    <e-img-match v-bind:src='item.iconUrl' width='90' height='90'/>
                    <p>{{item.serviceName}}</p>
                    </p>
                  </router-link>
                </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!--根据groupType菜单分组 10：赛事权限 11：培训权限 12：票务权限 13：赞助权限 20：订单管理 30：服务管理 40：支付管理 50：系统管理-->
        <el-row class="org_servelist" v-if="listShow[12]">
          <el-col :span="4" class="org_sername">票务业务</el-col>
          <el-col :span="20" class="org_serlcont">
            <el-row>
                <el-col :span="6" class="org_serlist" v-for='item in list' :key="item.id" v-if="item.groupType === 12">
                  <router-link :to="item.serviceUrl">
                    <p @click="handleChangeRoute($event,item.serviceName)">
                    <e-img-match v-bind:src='item.iconUrl' width='90' height='90'/>
                    <p>{{item.serviceName}}</p>
                    </p>
                  </router-link>
                </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!--根据groupType菜单分组 10：赛事权限 11：培训权限 12：票务权限 13：赞助权限 20：订单管理 30：服务管理 40：支付管理 50：系统管理-->
        <el-row class="org_servelist" v-if="listShow[13]">
          <el-col :span="4" class="org_sername">赞助业务</el-col>
          <el-col :span="20" class="org_serlcont">
            <el-row>
                <el-col :span="6" class="org_serlist" v-for='item in list' :key="item.id" v-if="item.groupType === 13">
                  <router-link :to="item.serviceUrl">
                    <p @click="handleChangeRoute($event,item.serviceName)">
                    <e-img-match v-bind:src='item.iconUrl' width='90' height='90'/>
                    <p>{{item.serviceName}}</p>
                    </p>
                  </router-link>
                </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!--根据groupType菜单分组 10：赛事权限 11：培训权限 12：票务权限 13：赞助权限 20：订单管理 30：服务管理 40：支付管理 50：系统管理-->
        <el-row class="org_servelist" v-if="listShow[20]">
          <el-col :span="4" class="org_sername">订单管理</el-col>
          <el-col :span="20" class="org_serlcont">
            <el-row>
                <el-col :span="6" class="org_serlist" v-for='item in list' :key="item.id" v-if="item.groupType === 20">
                  <router-link :to="item.serviceUrl">
                    <p @click="handleChangeRoute($event,item.serviceName)">
                    <e-img-match v-bind:src='item.iconUrl' width='90' height='90'/>
                    <p>{{item.serviceName}}</p>
                    </p>
                  </router-link>
                </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!--根据groupType菜单分组 10：赛事权限 11：培训权限 12：票务权限 13：赞助权限 20：订单管理 30：服务管理 40：支付管理 50：系统管理-->
        <el-row class="org_servelist" v-if="listShow[30]">
          <el-col :span="4" class="org_sername">服务管理</el-col>
          <el-col :span="20" class="org_serlcont">
            <el-row>
                <el-col :span="6" class="org_serlist" v-for='item in list' :key="item.id" v-if="item.groupType === 30">
                  <router-link :to="item.serviceUrl">
                    <p @click="handleChangeRoute($event,item.serviceName)">
                    <e-img-match v-bind:src='item.iconUrl' width='90' height='90'/>
                    <p>{{item.serviceName}}</p>
                    </p>
                  </router-link>
                </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!--根据groupType菜单分组 10：赛事权限 11：培训权限 12：票务权限 13：赞助权限 20：订单管理 30：服务管理 40：支付管理 50：系统管理-->
        <el-row class="org_servelist" v-if="listShow[40]">
          <el-col :span="4" class="org_sername">支付管理</el-col>
          <el-col :span="20" class="org_serlcont">
            <el-row>
                <el-col :span="6" class="org_serlist" v-for='item in list' :key="item.id" v-if="item.groupType === 40">
                  <router-link :to="item.serviceUrl">
                    <p @click="handleChangeRoute($event,item.serviceName)">
                    <e-img-match v-bind:src='item.iconUrl' width='90' height='90'/>
                    <p>{{item.serviceName}}</p>
                    </p>
                  </router-link>
                </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!--根据groupType菜单分组 10：赛事权限 11：培训权限 12：票务权限 13：赞助权限 20：订单管理 30：服务管理 40：支付管理 50：系统管理-->
        <el-row class="org_servelist" v-if="listShow[50]">
          <el-col :span="4" class="org_sername">系统管理</el-col>
          <el-col :span="20" class="org_serlcont">
            <el-row>
                <el-col :span="6" class="org_serlist" v-for='item in list' :key="item.id" v-if="item.groupType === 50">
                  <router-link :to="item.serviceUrl">
                    <p @click="handleChangeRoute($event,item.serviceName)">
                    <el-badge :value="item.serviceCode.includes('8993')?message_organize_unread.data:''" class="item" ><e-img-match v-bind:src='item.iconUrl' width='90' height='90'/></el-badge>
                    <p>{{item.serviceName}}</p>
                    </p>
                  </router-link>
                </el-col>
            </el-row>
          </el-col>
        </el-row>

    </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import authorizeApi from 'api/authorize'
  export default {
    components: {},
    computed: {
      ...mapGetters({
        message_organize_unread: 'message_organize_unread'
      })
    },
    data () {
      return {
        list: [],
        listShow: new Array(50).fill(false)
      }
    },
    watch: {
      '$route' () {
        // 对路由变化作出响应
        this.getAuthorizeList()
      }
    },
    created () {
      this.getAuthorizeList()
      if (!localStorage.getItem('auth_orgId')) {
        this.$router.push('/')
      }
    },
    methods: {
      getAuthorizeList () {
        this.list = []
        this.listShow = new Array(50).fill(false)
        authorizeApi.accpServiceList({
        }).then((res) => {
          for (let i = 0; i < res.data.length; i++) {
            this.$set(this, 'list', res.data)
          }
          if (this.list && this.list.length) {
            this.list.map(item => {
              if (item.serviceCode === '8993') {
                this.$store.dispatch('message_organize_unread')
              }
              if (item.groupType) {
                this.$set(this.listShow, Number(item.groupType), true)
              }
            })
          }
        }).catch((ERR) => {
          return false
        })
      },
      handleChangeRoute (event, code) {
        localStorage.setItem('auth_orgId', this.$route.params.org)
        if (code === '我的订单') {
          event.stopPropagation()
          event.preventDefault()
          this.$router.push({
            path: '/order',
            query: {
              statusList: '2,4',
              beginCreateDate: new Date().getTime() - 3600 * 1000 * 24 * 30,
              endCreateDate: new Date().getTime(),
              vendorUserId: localStorage.getItem('auth_orgId')
            }
          })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
.org_servelist{
  border-bottom:1px solid #efefef;
  margin:35px 0;
  padding-bottom: 25px;
  .org_sername {
    font-size: 16px;
    line-height: 130px;
  }
  .org_serlist{
    text-align: center;
    margin-bottom:10px;
    p{
      margin:20px 0;
    }
  }
}
</style>
